<template>
	<scroll-view scroll-y="true" class="shenye_coin" @touchmove.stop @scrolltolower="reachBottom">
		<view class="shenye_coin_box">
			<view class="coin_title_box">
                <view class="coin_title">
                    <view class="coin_title_number">{{integralData.coCo}}</view>
                    <view class="coin_title_icon">
                    	<image src="/static/newsImg/shenye_cion.png" mode="widthFix"></image>
                    	<text>我的神椰 CoCo</text>
                    </view>
                </view>
				<view class="coin_title">
                    <view class="coin_title_number">{{integralData.tpoint}}</view>
                    <view class="coin_title_icon">
                    	<image src="/static/newsImg/shenye_cion02.png" mode="widthFix"></image>
                    	<text>我的通分</text>
                    </view>
                </view>
			</view>
			<view class="integral_rule" @click="integralRule">
				<image src="/static/index/activity/ac_w.png" mode=""></image>
				<text>积分规则</text>
			</view>
			<view class="coin_nav">
                <view class="coin_navList" v-for="(item,index) in coin_navList" @click="handleCurrent(item.id)">
                    <text>{{item.value}}</text>
                    <view :class="[platformAssetType == item.id ? 'avtive' : '','bor'] "></view>
                </view>
            </view>
		</view>
		<view style="height: 426rpx;width: 100%; "></view>
		<view class="coin_content"> 
			<view class="coin_content_box">
				<view class="coin_item" v-for="(item,index) in dataList" :key="index"> 
					<view class="item_title">
						<text>{{item.changeTypeDict}}</text>
						<text v-if="item.type == 1">-{{item.changeAmount}}</text>
						<text class="color_FF3A3A" v-else>+{{item.changeAmount}}</text>
					</view>
                    <!-- <view class="type_red" v-if="!item.voucher">待上链</view>
                    <view class="type_hei" v-if="item.voucher">已上链</view> -->
                    <view class="coin_order"  v-if="item.voucher">TXID：{{item.voucher}}</view>
					<view class="coin_order" v-if="item.changeType != 1&&item.relevancyBusinessId != 12">订单编号：{{item.relevancyBusinessId}}</view>
					<view class="coin_time">{{item.createTime}}</view>
				</view>
			</view>
			<view class="no_info" v-if="dataList.length == 0">
				<image src="/static/my/news_no.png" mode="widthFix"></image>
				<text>暂无记录</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {getOperationConfiguration} from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
                coin_navList: [
                    {id: 4,value: 'CoCo流水'},
                    {id: 5,value: '通分流水'},
                ],
				dataList:[],
				coin:0,
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
                platformAssetType: 4,
                integralData: {},
			}
		},
		onLoad() {
			this.getCoinList()
			this.getIntegral()
		},
		methods: {
            //初始化
            init(){
                this.pageNum = 1
                this.dataList = []
            },
            //切换tab
            async handleCurrent(id){
                this.platformAssetType = id
                await this.init()
                await this.getCoinList()
            },
            async getIntegral(){
                var res = await this.$api.getIntegral()
                this.integralData = res.result
            },
			async integralRule(){
                var res = await getOperationConfiguration()
                var el = res.result
                uni.navigateTo({
                    url:'/pages/index/activity-rules/activity-rules?imgUrl='+el.integralRule
                })
            },

			async getCoin(){
				var data = await this.$api.getCoin()
				this.coin = data.result
			},

			async getCoinList() {
				uni.showLoading({ title:'加载中' })
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
                    platformAssetType: this.platformAssetType
				}
				try{
					const res = await this.$api.getCoinList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records			
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			
				},
				// 页面上拉触底事件的处理函数
				reachBottom(){
					console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
					if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
						// this.moreShop = 'noMore'
					} else {
						// this.moreShop = 'more'
						this.pageNum++; //每触底一次 page + 1;
						this.getCoinList()
					}
				},
		}
	}
</script>

<style scoped>
	page{
		background: #FCFCFD;
		width: 100%;
		height: 100%;
	}
	.no_info{
		padding-top: 200rpx;
		background: #FCFCFD;
	}
	.shenye_coin{
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		background: #FCFCFD;
		
	}
	.shenye_coin_box{
		position: fixed;
		width: 100%;
		height: 426rpx;
		top: 0;
		background: url('/static/newsImg/cion_bg.jpg') no-repeat;
		background-size: 100% 100%;
	}
    .coin_title_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
	.coin_title{
		flex: 1;
		height: 426rpx;
        box-sizing: border-box;
        padding-top: 100rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}
	.coin_title_number{
		font-size: 70rpx;
		color: #FFFFFF;
        font-weight: 500;
	}
	.coin_title_icon{
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.coin_title_icon image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	.integral_rule{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		color: #ffffff;
	}
	.integral_rule image{
		width: 26rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}
	.coin_nav{
		position: absolute;
		bottom: -2rpx;
		border-radius: 32rpx 32rpx 0 0;
		width: 100%;
		height: 40rpx;
		background: #FCFCFD;
        height: 146rpx;
        display: flex;
        justify-content: space-between;
	}
    .coin_navList{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .coin_navList text{
        font-size: 32rpx;
        color: #222;
    }
    .coin_navList .bor{
        width: 60rpx;
        height: 6rpx;
        border-radius: 10px;
        margin-top: 16rpx;
    }
     .coin_navList .avtive{
        background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
     }
	.coin_content{
		/* background: #FFFFFF; */
		padding-bottom: 50rpx;
	}
	.coin_content_box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.coin_item{
		width: 690rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 16rpx #EAEAEA;
		border-radius: 32rpx;
		margin-bottom: 30rpx;
		
	}
    .type_red{
        font-size: 28rpx;
        color: #FF3A3A;
    }
    .type_hei{
        font-size: 28rpx;
        color: #222;
    }
	.item_title{
		font-weight: bold;
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.coin_order{
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 12rpx;
	}
	.coin_time{
		font-size: 26rpx;
		color: #999999;
	}
	.color_FF3A3A{
		color: #FF3A3A;
	}
</style>
